<template>
  <div id="musicplayer" :class="{'mini-player': !isHomepage}">
    <div id="mp-fixed">
      <header id="mp-header">
        <div class="container">
          <div id="logo"><router-link to="/">音乐播放器</router-link></div>
          <div class="right-header">
            <router-link class="login-link" to="/login" v-if="!accountStatus">登录</router-link>
            <dropdown id="user" v-if="accountStatus" class="dropmenu" :visible="dropdown.visible" :position="dropdown.position" @clickOut="dropdown.visible = false">
              <div class="inlineBlock hero is-primary" @click="dropdown.visible = true">
                <div class="dropmenu-title">
                  <span v-text="accountNickname"></span>
                  <i class="fa fa-caret-down fa-fw"></i>
                </div>
              </div>
              <div slot="dropdown" class="dialog">
                <ul>
                  <router-link to="/mylist">
                    <li>我的歌单</li>
                  </router-link>
                  <li @click="logout">退出登陆</li>
                </ul>
              </div>
            </dropdown>
            <div id="search">
              <input type="text" placeholder="歌名" v-model="searchKeyword" @keyup.enter="search">
              <div id="search-btn" @click="search">
                <i class="fa fa-search"></i>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div id="mp-wrap">
        <div id="mp-inner">
          <div class="mp-round-btn" @click="info">介绍</div>
          <div id="mp-main">
            <div id="mp-info">
              <div id="mp-headpic">
                <img :src="singerHeadpic" alt="">
              </div>
              <div id="mp-info-basic">
                <div class="mp-text" id="mp-name" v-text="title"></div>
                <div class="mp-text" id="mp-singer" v-text="singer"></div>
              </div>
            </div>
            <div id="mp-progress-bar">
              <vue-slider v-bind="musicSliderProps"></vue-slider>
            </div>
            <div id="mp-controller">
              <div id="mp-controller-basic">
                <div id="mp-time" v-text="formatTime(leftTime)"></div>
                <div id="mp-volume">
                  <div id="mp-volume-btn" class="mp-controller-btn" @click="mute">
                    <i class="fa fa-fw" :class="{'fa-volume-down': volume > 0 && volume < 50 && !muted, 'fa-volume-up': volume > 50 && !muted, 'fa-volume-off': muted || volume == 0}"></i>
                  </div>
                  <div id="mp-volume-progress-bar">
                    <vue-slider v-bind="volumeSliderProps" v-model="volume"></vue-slider>
                  </div>
                </div>
              </div>
              <div id="mp-controller-more">
                <div id="mp-loop-btn" class="mp-controller-btn" :class="{'disabled':randomStatus}" @click="random">
                  <i class="fa fa-random fa-fw"></i>
                </div>
                <!--<div id="mp-comment-btn" class="mp-controller-btn"><i class="fa fa-commenting-o fa-fw"></i></div>-->
                <div id="mp-lyric-btn" class="mp-controller-btn" @click="lyric">
                  <i class="fa fa-sticky-note-o fa-fw"></i>
                </div>
              </div>
            </div>
            <div id="mp-controller-media">
              <div id="mp-prev-btn" class="mp-controller-btn" @click="prev">
                <i class="fa fa-step-backward fa-fw"></i>
              </div>
              <div id="mp-play-btn" class="mp-controller-btn" @click="play">
                <i class="fa fa-play fa-fw" :class="{'fa-pause': playing, 'fa-spinner': musicStatus.loading, 'fa-spin': musicStatus.loading}"></i>
              </div>
              <div id="mp-next-btn" class="mp-controller-btn" @click="next">
                <i class="fa fa-step-forward fa-fw"></i>
              </div>
            </div>
            <iframe :src="iframeStr" ref="iframe" class="hidden" frameborder="0"></iframe>
            <!--<audio ref="audio" id="audio" preload="auto"></audio>-->
          </div>
          <div class="mp-round-btn" @click="list">
            <i class="fa fa-th-list fa-fw"></i>
            <span v-text="musicList.length"></span>
          </div>
        </div>
        <div id="mp-background" class="container">
          <img v-if="this.musicInfo.img" :src="this.musicInfo.img" alt="">
        </div>
      </div>
    </div>
    <div id="mp-static"></div>
  </div>
</template>
<script>
import vueSlider from 'vue-slider-component';
import dropdown from 'vue-my-dropdown';
import { mapState } from 'vuex';

export default {
  name: 'musicplayer',
  components: {
    vueSlider,
    dropdown,
  },
  data() {
    return {
      dropdown: {
        visible: false,
        position: ['right', 'bottom', 'right', 'top'],
      },
      // status: 'pause', // play, pause,
      currentTime: 0,
      duration: 0,
      audio: null, // DOM元素
      searchKeyword: '',
      iframeStr: 'javascript:"<!doctype html><html><head></head><body><audio id=\'audio\'></audio></body></html>"',
    };
  },
  props: {
    isHomepage: {
      type: Boolean,
      required: true,
    },
  },
  watch: {
    playing() {
      if (this.playing) {
        this.playMusic();
      } else {
        this.pauseMusic();
      }
    },
    musicSrc() {
      this.reloadAudio();
    },
  },
  computed: {
    ...mapState({
      playing: state => state.musicplayer.musicStatus.playing,
      id: state => state.musicplayer.id,
      type: state => state.musicplayer.type,
      title: state => state.musicplayer.title,
      singer: state => state.musicplayer.singer,
      singerHeadpic: state => state.musicplayer.singerHeadpic,
      musicSrc: state => state.musicplayer.musicSrc,
      muted: state => state.musicplayer.muted,
      randomStatus: state => state.musicplayer.randomStatus,
      musicList: state => state.musicplayer.musicList,
      musicInfo: state => state.musicplayer.musicInfo,
      musicStatus: state => state.musicplayer.musicStatus,
      accountStatus: state => state.account.status,
      accountNickname: state => state.account.nickname,
    }),
    musicSliderProps() {
      return {
        value: this.currentTime,
        dotSize: 12,
        tooltip: 'hover',
        formatter: this.formatTime,
        speed: 0.3,
        min: 0, // 最小值
        max: this.duration, // 最大值
      };
    },
    volumeSliderProps() {
      return {
        dotSize: 0,
        tooltip: false,
        speed: 0.3,
        disabled: this.muted,
      };
    },
    volume: {
      get() {
        return this.$store.state.musicplayer.volume;
      },
      set(value) {
        this.$store.commit('changeVolume', value);
        this.audio.volume = value / 100;
      },
    },
    leftTime() {
      return this.duration - this.currentTime;
    },
    isPlayingMusicList() {
      return this.musicListIndex !== -1;
    },
    musicListIndex() {
      for (let i = 0; i < this.musicList.length; i += 1) {
        if (this.id === this.musicList[i].songId) {
          return i;
        }
      }
      return -1;
    },
  },
  methods: {
    getType(typeNum) {
      switch (typeNum) {
        case 1:
          return 'yc';
        case 2:
          return 'fc';
        case 3:
          return 'bz';
        default:
          return '';
      }
    },
    formatTime(second) {
      return `${Math.floor(second / 60)}:${(`0${Math.round(second % 60)}`).slice(-2)}`;
    },
    info() {
      const pathName = this.$route.name;
      switch (pathName) {
        case 'MusicInfoNow':
          this.$router.push({ path: '/' });
          break;
        default:
          this.$router.push({ path: '/musicinfo' });
          break;
      }
    },
    lyric() {
      const pathName = this.$route.name;
      switch (pathName) {
        case 'MusicLyric':
          this.$router.push({ path: '/' });
          break;
        default:
          this.$router.push({ path: '/musiclyric' });
          break;
      }
    },
    list() {
      const pathName = this.$route.name;
      switch (pathName) {
        case 'MusicListNow':
          this.$router.push({ path: '/' });
          break;
        default:
          this.$router.push({ path: '/musiclist' });
          break;
      }
    },
    play() {
      // switch (this.status) {
      //   case 'pause':
      //     this.playMusic();
      //     break;
      //   case 'play':
      //     this.pauseMusic();
      //     break;
      //   default:
      //     break;
      // }
      if (this.playing) {
        this.pauseMusic();
      } else {
        this.playMusic();
      }
    },
    next() {
      if (this.isPlayingMusicList) {
        let i = this.musicListIndex + 1;
        if (i >= this.musicList.length) {
          i = 0;
        }
        this.$store.dispatch('getMusic', {
          id: this.musicList[i].songId,
          type: this.getType(this.musicList[i].type),
        });
      }
    },
    prev() {
      if (this.isPlayingMusicList) {
        let i = this.musicListIndex - 1;
        if (i < 0) {
          i = this.musicList.length - 1;
        }
        this.$store.dispatch('getMusic', {
          id: this.musicList[i].songId,
          type: this.getType(this.musicList[i].type),
        });
      }
    },
    mute() {
      if (this.muted) {
        this.$store.commit('setUnMute');
      } else {
        this.$store.commit('setMute');
      }
      this.audio.muted = this.muted;
    },
    random() {
      if (this.randomStatus) {
        this.$store.commit('setUnRandom');
      } else {
        this.$store.commit('setRandom');
      }
    },
    search() {
      this.$router.push({
        name: 'Search',
        params: {
          keyword: this.searchKeyword,
        },
      });
    },
    logout() {
      this.dropdown.visible = false;
      this.$store.dispatch('logout');
    },
    playMusic() {
      this.audio.play();
    },
    pauseMusic() {
      this.audio.pause();
    },
    initAudio() {
      // this.audio = this.$refs.audio;
      const iframe = this.$refs.iframe;
      this.audio = iframe.contentDocument.getElementById('audio');
      // debugger;
      // this.audio.addEventListener('emptied', () => { console.log('emptied'); });
      // this.audio.addEventListener('stalled', () => { console.log('stalled'); });
      this.audio.addEventListener('play', () => {
        // this.status = 'play';
        this.$store.commit('play');
        this.currentTime = this.audio.currentTime;
      });
      this.audio.addEventListener('pause', () => {
        // this.status = 'pause';
        this.$store.commit('pause');
        this.currentTime = this.audio.currentTime;
      });
      this.audio.addEventListener('ended', () => { this.next(); });
      this.audio.addEventListener('error', () => { this.next(); });
      this.audio.addEventListener('durationchange', () => {
        this.duration = this.audio.duration;
      });
      this.audio.addEventListener('timeupdate', () => {
        this.currentTime = this.audio.currentTime;
      });
    },
    initPlayer() {
      this.$store.dispatch('initPlayer');
    },
    initAccount() {
      this.$store.dispatch('verify')
        .then(() => {

        })
        .catch(() => {

        });
    },
    reloadAudio() {
      this.currentTime = 0;
      this.duration = 0;
      this.audio.src = this.musicSrc;
      this.audio.load();
      this.playMusic();
    },
  },
  mounted() {
    this.initAudio();
    this.initPlayer();
    this.initAccount();
  },
};
</script>
<style lang="scss">
@import '../scss/theme.scss';
@import '../assets/plugin/font-awesome-4.7.0/scss/font-awesome.scss';

#musicplayer {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 0.3s ease;
}

#mp-fixed {
  position: fixed;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
}

#mp-static {
  width: 100%;
  height: 100%;
}

#mp-header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: $color_primary;
  z-index: 9;
  .container {
    display: flex;
    height: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    .right-header {
      display: flex;
      flex-flow: row nowrap;
    }
    .login-link {
      margin-right: 15px;
      font-size: 1.3rem;
      line-height: 30px;
      color: black;
    }
    #logo {
      font-size: 1.5rem;
      a {
        color: #000000;
      }
    }
    #user {
      margin-right: 10px;
      line-height: 2rem;
      .dropmenu-title {
        line-height: 30px;
      }
    }
    #search {
      font-size: 1.3rem;
      position: relative;
      input {
        outline: none;
        width: 150px;
        box-sizing: border-box;
        font-size: 1.3rem;
        line-height: 2rem;
        padding-left: 10px;
        padding-right: 30px;
        border: 2px solid #ffffff;
        border-radius: 10px;
        background: transparent;
        font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
      }

      #search-btn {
        position: absolute;
        top: 2px;
        right: 10px;
        line-height: 2rem;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
}

#mp-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}

#mp-inner {
  width: 700px;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 1px 1px 10px 1px $color_secondary;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  position: relative;
  z-index: 10;
  transition: all 0.3s ease;
}

#mp-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 90%;
    display: block;
    filter: blur(20px);
  }
}

#mp-main {
  width: 500px;
  #mp-info {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    #mp-headpic {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    #mp-info-basic {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 60px;
      text-align: right;
      padding-right: 10px;
      transition: all 0.3s ease;
      #mp-name {
        font-size: 2.1rem;
        transition: all 0.3s ease;
      }
      #mp-singer {
        padding-top: 5px;
        font-size: 1.4rem;
        transition: all 0.3s ease;
      }
    }
  }
  #mp-progress-bar {
    margin-top: 5px;
    position: relative;
    z-index: 999;
  }
  #mp-controller {
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: -40px;
    position: relative;
    z-index: 99;
    transition: all 0.3s ease;
    #mp-controller-basic {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 1.4rem;
      line-height: 1.6rem;
      height: 1.6rem;
      #mp-time {
        width: 40px;
      }
      #mp-volume {
        display: flex;
        flex-direction: row;
        &:hover {
          #mp-volume-progress-bar {
            opacity: 1;
          }
        }
        #mp-volume-progress-bar {
          opacity: 0;
          transition: opacity 0.3s ease;
          width: 80px;
          margin-top: 6px;
          margin-left: 4px;
        }
      }
    }
    #mp-controller-more {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: flex-end;

      .mp-controller-btn {
        text-align: right;
        margin-left: 15px;
        &.disabled {
          color: gray;
        }
      }
    }
  }
  #mp-controller-media {
    margin-top: -15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    z-index: 99;
    width: 105px;
    transition: all 0.3s ease;
    .mp-controller-btn {
      margin-right: 15px;
    }
  }
}

.mp-round-btn {
  cursor: pointer;
  border-radius: 10px;
  margin-top: 20px;
  font-size: 1.4rem;
  border: 1px solid $color_accent;
  padding: 6px 10px;
  color: $color_text_link;
  position: relative;
  z-index: 11;
}

.mp-controller-btn {
  cursor: pointer;
  font-size: 1.6rem;
}

.mini-player {
  &#musicplayer {
    height: 100px;
  }
  #mp-fixed {
    height: 100px;
  }
  #mp-inner {
    background-color: transparent;
    box-shadow: none;
  }
  #mp-background {
    opacity: 0;
  }
  #mp-main {
    #mp-info {
      flex-direction: row;
      #mp-headpic {
        display: none;
      }
      #mp-info-basic {
        flex-direction: row;
        justify-content: flex-start;
        height: auto;
        #mp-name {
          font-size: 1.3rem;
          &:after {
            content: ' - ';
          }
        }
        #mp-singer {
          font-size: 1.3rem;
          padding-top: 0;
        }
      }
    }
    #mp-controller {
      height: auto;
      margin-top: 2px;
    }
    #mp-controller-media {
      margin: auto;
      margin-top: -20px;
      justify-content: center;
    }
  }
  .mp-round-btn {
    margin-top: 0;
  }
}

.dropmenu {
  display: block;
  font-size: 1.3rem;
  position: relative;
  .dropmenu-title {
    cursor: pointer;
  }
  ul {
    position: absolute;
    right: 0;
    list-style: none;
    margin: 0;
    width: 120px;
    text-align: center;
    box-shadow: 1px 1px 10px 1px $color_accent;
    border-radius: 10px;
    padding: 0;
    background-color: #ffffff;
    z-index: 99;
    margin-top: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1;
    a {
      color: #000000;
    }
    li {
      cursor: pointer;
      padding-top: 10px;
      padding-bottom: 10px;
      transition: all 0.5s ease;
      &:hover {
        background-color: #eeeeee;
      }
    }
  }
}

.hidden {
  display: none;
}
@media (max-width: 1440px) {
  .container{
    width: 1024px;
  }
  .mini-player {
    #mp-inner {
      width: 550px;
    }
    #mp-main {
      width: 400px;
    }
    #mp-volume-progress-bar {
      width: 50px !important;
    }
  }
}
</style>
